<template>
  <div>
    <top-title/>

    <van-swipe-cell
      v-for="todo in actions"
      :key="todo.id">
      <template #left>
      <van-button square type="danger" text="删除" />
    </template>
      <div class="actionItem" @click="$router.push('/actionDetail?id='+todo.id)">
        <div>
          {{todo.title}}
          <p>{{todo.isDone ? '已打卡':'未打卡'}}</p>
        </div>
        <div>
          <strong>{{todo.lastedDays}}天</strong>
          <p>共坚持</p>
        </div>
      </div>
    <template #right>
      <van-button square type="primary" text="编辑" />
    </template>
    <van-divider />
  </van-swipe-cell>
  </div>
</template>

<script>
import TopTitle from './topTitle.vue'
export default {
  components: {
    TopTitle
  },
  setup () {
    const actions = [{
      id: 1,
      title: '早起',
      lastedDays: 15,
      isDone: false
    }, {
      id: 2,
      title: '锻炼身体',
      lastedDays: 10,
      isDone: true
    }]
    return {
      actions
    }
  }
}
</script>

<style>
.actionItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
